<template>
    <div style="width: 100%; height: 100%;">
        <div class="scrollerTop">
            <!-- 搜索 -->
            <div class="vip-search" @click="switchTo('/VipSearch')">
                <div>搜索商品名称<i></i></div>
            </div>
            <!-- 一级分类 -->
            <div class="team-list">
                <div class="team-list-ul">
                    <!-- <a class="team-list-ul-pink">推荐<i></i></a> -->
                    <a v-for="(item,index) in getOne" :key="index" @click="shoplist(index,item.id)" v-if="item.level == 0" :class="{active:index == n}" >{{item.category_name}}<i></i></a>
                </div>
            </div>
        </div>
        <div class="shop">
            <scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
                <div class="shop-goods" v-for="(item,index) in shop" :key="index">
                    <router-link  :to="{path:'/Vip/VipDetail/'+ item.id}">
                        <img :src="url + item.thumbnail" />
                        <div class="shop-goods-info">
                            <p>{{item.goods_title}}</p>
                            <p>价格：￥{{item.market_price}}</p>
                            <p>会员价：<em>￥<i>{{item.price}}</i> </em></p>
                        </div>
                    </router-link>
                </div>
                <div class="clearfix"></div>
            </scroller>
        </div>

        <router-view></router-view>

    </div>
</template> 

<script>
import url from 'url'
import qs from 'qs'
import wx from 'weixin-jsapi'
export default {
    name: 'VipClassifyList',
    data () {
        return {
            getOne:[],//一级菜单
            url:'http://api.huiwanzhong365.com',
            n: 0,
            shop:[],
            page:1,
            categoryTd:1
            // list:[1,2,3,4,5,6,7,8,9,0]
        }
    },
    
    methods:{
        //下拉刷新
        refresh:function(done){
            console.log('refresh')
            this.shop.length = 0
            this.page = 1
            this.$refs.scrollerBottom.finishInfinite(false)
            this.getDataList(this.page, done);
        },
        
        //上拉加载
        infinite(done){
            console.log('infinite')
            this.getDataList(this.page, done);
        },
        //会员商品列表
        getDataList(page, done){
            var that = this
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            console.log(this.categoryTd)
            var draw = { 
                openid:openid,
                goods_type:0, 
                page:page,
                category_id:this.categoryTd
            }
            that.$http.post('/index/merchant/goods/list',qs.stringify(draw)).then(res=>{
                console.log(res.data.data)
                if(res.data.data.length == 0) {
                    that.$refs.scrollerBottom.finishInfinite(true)
                    return false
                }
                that.shop.push(...res.data.data);
                that.page++
                done()
            }).catch(err=>{
                console.log(err)
                done()
            })
        },
        switchTo(path){
            // console.log(this.$router)
            this.$router.push(path)
        },
        //一级菜单
        getCateOne:function(){
            var that = this
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            var draw = { 
                openid:openid,
                level:0
            }
            that.$http.post('/index/merchant/goods/category',qs.stringify(draw)).then(res=>{
                //console.log(res.data)
                this.getOne = res.data;
            }).catch(err=>{
                console.log(err)
            })
        },
        //根据分类查商品
        shoplist:function(index,id){
            //console.log(index)
            this.n = index;//this指向app
            //console.log(this.n)
            var that = this
            this.categoryTd = id
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            var draw = { 
                openid:openid,
                cate_id:id
                // level:0
            }
            that.$http.post('/index/merchant/goods/cateGoods',qs.stringify(draw)).then(res=>{
                console.log(res.data)
                this.shop = res.data.data;
            }).catch(err=>{
                console.log(err)
            })
        },

    },
    // const scrollBehavior = (to, from, savedPosition) => {
    //     if (to.matched.some(t => t.meta.keep_alive)) {
    //         to.meta.saved_position = savedPosition; // 传递这个值到具体页面来判断是否进行数据刷新
    //         let back = savedPosition ? savedPosition : {x: 0, y: 0};
    //         return back;
    //     }
    // };
    mounted(){
        this.getCateOne();
        
        // this.vipShop();
    }
}
</script>

<style scoped>
.shop{
    position: relative;
    height: 96%;
    margin-top: 114px;
}
.clearfix{
    clear: both;
}
.scrollerTop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: #FFF;
    width: 100%;
}

/* #outer-q41uw{
    width: 100%;
    height: 460px;
}
._v-container{
    position: inherit;
} */
.list{
    width:100%;
    height:100px;
    line-height: 100px;
    text-align: center
}
.team-list-ul a{
    position: relative;
}
.active{
    color:#FE2746 !important;
    font-weight: 600;
    background-color: #FFF !important;
}
.active i {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
}
.team-list{
	width: 100%;
    height: 38px;
    display: inline-block;
    overflow: auto;
}
.team-list-ul{
	width:1000px;
}
.team-list-ul a{
    width: 82px;
    text-align: center;
    display: inline-block;
    float: left;
    padding: 7px 0;
    color: #999;
}
.team-list-ul-pink{
	color:#FE2746 !important;
	position: relative;
}
.team-list-ul-pink i{
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
}
.vip-list a{
    color:#999;
    float: left;
}
.vip-search{
	width:94%;
	margin:0 auto;
	background: #DFB87D;
	border-radius: 20px;
}
.vip-search div{
	color:#FFF;
	margin-top:15px;
    padding:8px 16px;
    margin-bottom: 15px;
}
.vip-search div i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
}
</style>
